* {
	padding: 0;
	margin: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	font-family: JetBrains Mono Medivm;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color:#1E90FF;
}

.form-wrapper {
	width: 300px;
	background-color: rgb(41, 45, 62);
	color: #fff;
	border-radius: 2px;
	padding: 58px;

}

.form-wrapper .header {
	text-align: center;
	font-size: 35px;
	text-transform: uppercase;
	line-height: 100px;
}

.form-wrapper .input-wrapper input {
	background-color: rgb(41, 42, 62);
	border: 0;
	width: 100%;
	font-size: 15px;
	color: #FFFFFF;
	outline: none;


}

.form-wrapper .input-wrapper input::placeholder {
	text-transform: uppercase;
}

.form-wrapper .input-wrapper .border-wrapper {
	background-image: linear-gradient(to right, #e8198b, #8eb4dd);
	width: 100%;
	height: 50px;
	margin-bottom: 20px;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-wrapper .input-wrapper .border-wrapper .border-item {
	height: calc(100% - 4px);
	width: calc(100% - 4px);
	border-radius: 30px;
}

.form-wrapper .action {
	display: flex;
	justify-content: center;

}

.form-wrapper .action .btn {
	width: 60%;
	text-transform: uppercase;
	border: 2px solid #1E90FF;
	text-align: center;
	line-height: 50px;
	border-radius: 30px;
	cursor: pointer;
	transition: .2s;
}

.form-wrapper .action .btn:hover {
	background-color: #1E90FF;
}

.form-wrapper .icon-wrapper {
	text-align: center;
	width: 60%;
	margin: 0 auto;
	margin-top: 20px;
	border-top: 1px dashed rgb(146, 146, 146);
	padding: 20px;
}
.form-wrapper .icon-wrapper i{
	font-size: 20px;
	color: rgb(187,187,187);
	cursor: pointer;
	border: 1px solid #FFFF;
	pad: 5px;
	/* 圆角程度 */
	border-radius: 3px;
	
}
